<template>
	<view class="container" @click="addLove">
		<template v-if="show3dAlbum">
			<view class="album3d" @click="album3dActive = true"><m-3d-album :active="album3dActive"></m-3d-album></view>
			<m-popup :show="album3dActive" @end="popupEnd"></m-popup>
		</template>
		
		<template v-else>
			<m-love-album></m-love-album>
		</template>

		<template v-for="love of loveList">
			<view :key="love.id" class="love" :style="{ top: love.top + 'px', left: love.left + 'px' }"></view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loveList: [],
			album3dActive: false,
			show3dAlbum: true
		};
	},
	methods: {
		addLove(e) {
			e.changedTouches.forEach(touch => {
				this.loveList.push({
					id: this.$u.guid(),
					top: touch.clientY - 10,
					left: touch.clientX - 10,
				});
				let love = this.loveList[this.loveList.length - 1];
			});

			this.clearLove();
		},
		clearLove() {
			// 防抖：在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效
			this.$u.debounce(() => {
				// 清理垃圾
				this.loveList = [];
			}, 1000);
		},
		// 弹窗结束进入相册
		popupEnd() {
			this.show3dAlbum = false;
		}
	}
};
</script>

<style lang="scss">
.container {
	height: 100vh;
	background: radial-gradient(#ff82d4, #8a80ff);
	overflow: hidden;
	
	.album3d{
		position: absolute;
		top: calc(50% - 100px);
		left: calc(50% - 100px);
	}

	// 爱心动画
	@keyframes love-show {
		0% {
			opacity: 1;
			transform: scale(1, 1) rotate(45deg);
			margin-top: 0;
		}
		100% {
			opacity: 0;
			transform: scale(1.2, 1.2) rotate(45deg);
			margin-top: -40px;
		}
	}

	// 点击屏幕的爱心
	.love {
		width: 20px;
		height: 20px;
		position: fixed;
		background: #f00;
		transform: rotate(45deg);
		animation: love-show 1s 1 linear;
		animation-fill-mode: forwards;
		z-index: 9999;

		&:after,
		&:before {
			content: '';
			width: inherit;
			height: inherit;
			background: inherit;
			border-radius: 50%;
			position: fixed;
		}
		&:before {
			left: -10px;
		}
		&:after {
			top: -10px;
		}
	}
}
</style>
